<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../application/vue.js"></script>
    <style>
        body{
            margin-bottom:400px;
        }
        .fs{
            font-size: 24px;
        }
        .fc{
            color: red;
        }
        .bc{
            background-color: #cccccc;
        }
        .border{
            border: 1px solid black;
        }
        .testfs{
            font-weight:bold;
        }
    </style>
</head>
<body>
    <div class="app">
        <p :innerHtml="str"></p>
        <p :inner-html="str"></p>
        <p :inner-html.prop="str"></p>
        <hr>
        <p :user-name.camel="msg">{{msg}}</p>
        <hr>
        <p :itany.prop="msg" @click="getProp($event.target)">{{msg}}</p>
        <p :user-name.prop="msg" @click="getProp1($event.target)">{{msg}}</p>
        <hr>
        <input type="text" :disabled="flag">
        <input type="button" value="切换禁用状态" @click="flag=!flag">
        <hr>
        <input type="button" value="String" :disabled="'梦云妹妹'">
        <input type="button" value="String" :disabled="''">
        <input type="button" value="Number" :disabled="123">
        <input type="button" value="Number" :disabled="-2">
        <input type="button" value="Array" :disabled="[1,2,3]">
        <input type="button" value="Object" :disabled="{name:'iboy'}">
        <input type="button" value="Null" :disabled="null">
        <input type="button" value="Undefined" :disabled="undefined">
        <hr>
        <p :style="'color:red;background-color:yellow;'">{{msg}}</p>
        <p :style="'color:'+color+';background-color:yellow'">{{msg}}</p>
        <p :style="`color:${color};background-color:gray;`">{{msg}}</p>
        <hr>
        <input type="color" name="" id="" @change="setColor($event.target.value)">
        <input type="color" name="" id="" @input="setColor($event.target.value)">
        <hr>
        <p :style="styleObj">{{msg}}</p>
        <input type="color" name="" id="" @change="styleObj.color=$event.target.value">
        <input type="color" name="" id="" @change="styleObj.backgroundColor=$event.target.value">
        <hr>
        <p :style="styleArr">{{msg}}</p>
        <p :style="[styleObj1,styleObj2]">{{msg}}</p>
        <hr>
        <p class="fs fc bc border">{{msg}}</p>
        <p :class="classSty">{{msg}}</p>
        <input type="button" value="添加边框" @click="classSty=classSty+' border'">
        <input type="button" value="删除fs样式" @click="removeFs()">
        <hr>
        <p :class="classArr">{{msg}}</p>
        <input type="button" value="添加边框" @click="addBorder()">
        <input type="button" value="删除fs样式" @click="removeFsArr()">
        <hr>
        <p :class="classObj">{{msg}}</p>
        <input type="button" value="切换字体颜色" @click="classObj.fc=!classObj.fc">
        <input type="button" value="切换字体大小" @click="classObj.fs=!classObj.fs">
        <input type="button" value="切换字体边框" @click="classObj.border=!classObj.border">
        <input type="button" value="切换字体粗细" @click="classObj.testfs=!classObj.testfs">
    </div>
</body>
<script>
    new Vue({
        el:".app",
        data:{
            msg:"梦云妹妹",
            str:"<h3>武当王也，拜见老天师!</h3>",
            flag:false,
            color:"blue",
            styleObj:{
                color:"yellow",
                backgroundColor:"red",
                "font-size":"20px"
            },
            styleArr:[
                {
                    color:"yellow"
                },
                {
                    backgroundColor:"skyblue"
                }
            ],
            styleObj1:{
                color:"red"
            },
            styleObj2:{
                backgroundColor:"purple"
            },
            classSty:"testfs fs fc bc",
            classArr:["testfs","fs","fc","bc"],
            classObj:{
                testfs:true,
                fs:false,
                fc:false,
                border:true
            }
        },
        methods:{
            getProp(e){
                console.log(e.itany);
            },
            getProp1(e){
                console.log(e.userName);
            },
            setColor(e){
                console.log(e);
            },
            removeFs(){
                // this.classSty=this.classSty.replace("fs","");
                this.classSty=this.classSty.replace(/fs/g,"");
            },
            addBorder(){
                this.classArr.push("border");
            },
            removeFsArr(){
                let i=this.classArr.indexOf("fs");
                this.classArr.splice(i,1);
            }
        }
    })
</script>
</html>